<template>
  <div class="job-container">
    <div class="header">
      <div class="search-box">
        <el-input
          type="text"
          v-model="data.key"
          @keyup.enter="methods.bind"
          placeholder="根据名称搜索"
        />
        <el-button type="primary" @click="methods.bind">搜索</el-button>
      </div>
      <div class="operations">
        <el-button type="success" plain @click="events.ToAdd">添加</el-button>
      </div>
    </div>

    <el-table :data="data.tableData" style="width: 100%" stripe>
      <el-table-column type="expand">
        <template #default="scope">
          <div class="detail-box" m="4">
            <p m="t-0 b-2">编号: {{ scope.row.id }}</p>
            <p m="t-0 b-2">账号: {{ scope.row.account }}</p>
            <p m="t-0 b-2">头像: {{ scope.row.avatar }}</p>
            <p m="t-0 b-2">角色: {{ scope.row.role }}</p>
            <p m="t-0 b-2">部门: {{ scope.row.departmentName }}</p>
            <p m="t-0 b-2">职位: {{ scope.row.jobName }}</p>
            <p m="t-0 b-2">是否激活: {{ scope.row.isActive }}</p>
            <p m="t-0 b-2">是否禁用: {{ scope.row.isBan }}</p>
            <p m="t-0 b-2">创建时间: {{ scope.row.createTime }}</p>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="手机号" width="180">
        <template #default="scope">
          <div style="display: flex; align-items: center">
            <el-icon><Phone /></el-icon>
            <span style="margin-left: 10px">{{ scope.row.phone }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="名称" width="180">
        <template #default="scope">
          <el-popover
            effect="light"
            trigger="hover"
            placement="top"
            width="auto"
          >
            <template #default>
              <div>名称: {{ scope.row.name }}</div>
              <div>账号: {{ scope.row.account }}</div>
            </template>
            <template #reference>
              <el-tag>{{ scope.row.name }}</el-tag>
            </template>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template #default="scope">
          <el-button
            size="small"
            type="warning"
            @click="events.ToEdit(scope.row?.id)"
          >
            编辑
          </el-button>
          <el-popconfirm
            confirm-button-text="是"
            cancel-button-text="否"
            :title="`是否要删除职位\&quot;` + scope.row?.name + `\&quot;?`"
            @confirm="events.handleDelete(scope.row?.id)"
          >
            <template #reference>
              <el-button size="small" type="danger"> 删除 </el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      background
      v-model:page-size="data.pagination.limit"
      v-model:current-page="data.pagination.page"
      :page-sizes="[data.pagination.limit, 100, 200, 300, 400]"
      layout="total, sizes, prev, pager, next, jumper"
      :total="data.total"
      @change="methods.bind"
    />
  </div>
</template>

<script setup lang="ts">
import { onMounted, reactive } from 'vue';
import { useRouter } from 'vue-router';
import { throttle, toast } from '../../utils/tools';
import { deleteUser, getUserList } from '../../functions/user';

const router = useRouter();

const data = reactive<{
  tableData: any[];
  key: string;
  pagination: { page: number; limit: number };
  total: number;
}>({
  tableData: [],
  key: '',
  pagination: {
    page: 1,
    limit: 10,
  },
  total: 0,
});

const methods = {
  bind: throttle(async () => {
    const res = await getUserList({
      page: data.pagination.page,
      limit: data.pagination.limit,
      key: data.key,
    });
    if (res.code >= 0) {
      data.tableData = res.data.data.map((d: any) => {
        d.createTime = new Date(d.createTime).toLocaleString();
        return d;
      });
      data.total = res.data.total;
    }
  }),
};
const events = reactive({
  ToAdd: () => {
    router.push('/org/user/add');
  },
  ToEdit: (id: number) => {
    router.push('/org/user/edit?id=' + id);
  },
  handleDelete: async (id: number) => {
    const res = await deleteUser(id);
    if (res.code >= 0) {
      toast.success(res.message || '删除成功');
      await methods.bind();
    } else {
      toast.error(res.message || '删除失败');
    }
  },
  handleSearch: () => {
    console.log(data.key);
  },
});

onMounted(async () => {
  await methods.bind();
});
</script>

<style scoped lang="scss">
.job-container {
  padding: 20px;
}
.search-box {
  display: flex;
  align-items: center;
  width: 50%;
}
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.detail-box {
  padding-left: 40px;
}
.operations {
  display: flex;
  justify-content: flex-end;
}
</style>
